<template>
	<view class="page-container">
		<layout layoutTitle="我的任务" a_icon />
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-actions">
				<view class="notification-icon">
	
				</view>
			</view>
		</view>
		
		<!-- 用户欢迎区 -->
		<view class="welcome-section">
			<view class="welcome-text">
				<text class="greeting">您好，管理员</text>
				<text class="subtitle">今天有 {{ pendingTasks }} 个待处理任务</text>
			</view>
			<view class="date-info">
				<text class="date">{{ todayDate }}</text>
				<text class="day">{{ weekday }}</text>
			</view>
		</view>
		
		<!-- 统计卡片 -->
		<view class="stats-row">
			<view class="stat-card">
				<text class="stat-number">{{ todayNewTasks }}</text>
				<text class="stat-label">今日新增</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ pendingTasks }}</text>
				<text class="stat-label">待处理</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ completedTasks }}</text>
				<text class="stat-label">已完成</text>
			</view>
		</view>
		
		<!-- 任务分类标题 -->
		<view class="section-title">
			<view class="title-bar"></view>
			<text class="title-text">待审核任务</text>
		</view>
		
		<!-- 任务卡片列表 -->
		<view class="task-grid">
			<view 
				v-for="(task, index) in taskList" 
				:key="index"
				class="task-card" 
				:class="{'has-badge': task.unread > 0}"
				hover-class="task-card-hover" 
				@click="navigateToTask(task.url)"
			>
				<view class="card-content">
					<view class="task-icon" :style="{ backgroundColor: task.color }">
						<text class="icon-text">{{ task.iconText }}</text>
					</view>
					
					<view class="task-info">
						<text class="task-name">{{ task.name }}</text>
						<text class="task-desc">{{ task.desc }}</text>
					</view>
					
					<view class="badge" v-if="task.unread > 0">
						<text class="badge-text">{{ task.unread }}</text>
					</view>
				</view>
				
				<view class="progress-bar" :style="{ width: task.progress + '%', backgroundColor: task.color }"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 日期数据
const today = new Date();
const todayDate = computed(() => {
	const year = today.getFullYear();
	const month = String(today.getMonth() + 1).padStart(2, '0');
	const day = String(today.getDate()).padStart(2, '0');
	return `${year}-${month}-${day}`;
});

const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weekday = computed(() => weekdays[today.getDay()]);

// 统计数据
const todayNewTasks = ref(8);
const pendingTasks = ref(14);
const completedTasks = ref(32);
const hasNewTasks = ref(true);

// 任务数据
const taskList = ref([
	{
		name: '供应商审核',
		desc: '审核供应商资质与申请',
		url: '/pages/mytask/task1',
		color: '#2ecc71',
		iconText: '供',
		unread: 5,
		progress: 80
	},
	{
		name: '入库申请审核',
		desc: '处理物料入库申请',
		url: '/pages/mytask/task2',
		color: '#27ae60',
		iconText: '入',
		unread: 3,
		progress: 60
	},
	{
		name: '出库申请审核',
		desc: '处理物料出库申请',
		url: '/pages/mytask/task3',
		color: '#3498db',
		iconText: '出',
		unread: 2,
		progress: 40
	},
	{
		name: '补货申请审核',
		desc: '处理物料补货申请',
		url: '/pages/mytask/task4',
		color: '#1abc9c',
		iconText: '补',
		unread: 0,
		progress: 20
	}
]);

// 导航函数
const navigateToTask = (url) => {
	try {
		// 检查uni对象是否存在
		if (typeof uni !== 'undefined') {
			uni.navigateTo({
				url: url,
				fail: (err) => {
					console.error('导航失败', err);
					// 如果uni API失败，尝试使用原生方法
					if (typeof window !== 'undefined') {
						window.location.href = url;
					}
				}
			});
		} else if (typeof window !== 'undefined') {
			// 如果uni不存在，尝试使用原生方法
			window.location.href = url;
		}
	} catch (error) {
		console.error('导航出错', error);
		// 降级处理
		if (typeof window !== 'undefined') {
			window.location.href = url;
		}
	}
};
</script>

<style lang="scss">
.page-container {
	background-color: #f1f7ed;
	min-height: 100vh;
	padding-bottom: 40rpx;
}

/* 导航栏样式 */
.custom-navbar {
	padding: 0rpx 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #f1f7ed;
	
	.navbar-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #2c3e50;
	}
	
	.navbar-actions {
		display: flex;
		
		.notification-icon {
			width: 40rpx;
			height: 40rpx;
			position: relative;
			
			.dot {
				position: absolute;
				top: 0;
				right: 0;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #e74c3c;
			}
		}
	}
}

/* 欢迎区域样式 */
.welcome-section {
	padding: 20rpx 32rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background: linear-gradient(135deg, #27ae60, #2ecc71);
	color: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx 32rpx;
	box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.15);
	
	.welcome-text {
		.greeting {
			font-size: 40rpx;
			font-weight: bold;
			color: #ffffff;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.subtitle {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
			display: block;
		}
	}
	
	.date-info {
		text-align: right;
		
		.date {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: 500;
			display: block;
			margin-bottom: 6rpx;
		}
		
		.day {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.9);
			display: block;
		}
	}
}

/* 统计卡片样式 */
.stats-row {
	display: flex;
	justify-content: space-between;
	padding: 0 32rpx;
	margin-bottom: 40rpx;
	
	.stat-card {
		background: linear-gradient(135deg, #ffffff, #f1f7ed);
		width: 30%;
		height: 140rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(46, 204, 113, 0.1);
		border-left: 6rpx solid #27ae60;
		
		.stat-number {
			font-size: 44rpx;
			font-weight: bold;
			color: #27ae60;
			margin-bottom: 10rpx;
		}
		
		.stat-label {
			font-size: 24rpx;
			color: #7f8c8d;
		}
	}
}

/* 分类标题样式 */
.section-title {
	display: flex;
	align-items: center;
	padding: 20rpx 32rpx;
	margin-bottom: 20rpx;
	
	.title-bar {
		width: 8rpx;
		height: 36rpx;
		background-color: #27ae60;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}
}

/* 任务卡片网格 */
.task-grid {
	padding: 0 32rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
	
	.task-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(46, 204, 113, 0.1);
		overflow: hidden;
		position: relative;
		transition: all 0.3s ease;
		border: 1rpx solid #ecf0f1;
		
		&.has-badge {
			border: 1rpx solid rgba(231, 76, 60, 0.1);
		}
		
		.card-content {
			padding: 24rpx;
			position: relative;
			min-height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		
		.task-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
			
			.icon-text {
				color: white;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		
		.task-info {
			margin-top: auto;
			
			.task-name {
				font-size: 32rpx;
				font-weight: 600;
				color: #2c3e50;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.task-desc {
				font-size: 24rpx;
				color: #7f8c8d;
				display: block;
			}
		}
		
		.badge {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			background-color: #e74c3c;
			color: white;
			border-radius: 100rpx;
			min-width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 12rpx;
			box-shadow: 0 2rpx 8rpx rgba(231, 76, 60, 0.3);
			
			.badge-text {
				font-size: 24rpx;
				color: white;
			}
		}
		
		.progress-bar {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 6rpx;
			border-radius: 0 3rpx 3rpx 0;
		}
	}
	
	.task-card-hover {
		transform: translateY(-5rpx);
		box-shadow: 0 8rpx 24rpx rgba(46, 204, 113, 0.15);
	}
}
</style>